<template>
  <a-row type="flex" :gutter="20">
    <a-col :span="10">
      <a-card :headStyle="{ padding: '0 10px' }" :bodyStyle="{ height: '500px', overflowY: 'auto' }">
        <div slot="title">
          <a-dropdown>
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1"> 添加主菜单 </a-menu-item>
              <a-menu-item key="2"> 添加子菜单 </a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px"> 添加菜单 <a-icon type="down" /> </a-button>
          </a-dropdown>
          <a-button type="danger" style="margin-left: 8px"> 删除 </a-button>
          <a-button type="danger" style="margin-left: 8px" @click="load"> 刷新 </a-button>
        </div>
        <!-- 树结构 -->
        <c-tree :treeData="MenuList" @selected-Key="selectedKey"></c-tree>
      </a-card>
    </a-col>
    <a-col :span="14">
      <a-card :headStyle="{ padding: '0 10px' }" :bodyStyle="{ minHeight: '300px' }">
        <div slot="title">编辑菜单</div>
        <!-- 树详情 -->
            <c-form ref="cForm" v-show="item" :item="item" />
          <a-empty  v-show="!item" description="从菜单列表选择一项后，进行编辑" />


      </a-card>
    </a-col>
  </a-row>
</template>
<script>
import cTree from '@views/systems/components/Tree.vue'
import cForm from '@views/systems/components/Form.vue'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      MenuList: [],
      item:null
    }
  },
  components: {
    cTree,
    cForm,
  },
  computed: {
    ...mapState({
      // 主路由
      mainRouters: (state) => state.permission.addRouters,
      // 后台菜单
      permissionMenuList: (state) => state.user.permissionList,
    }),
  },
  created() {
    this.MenuList = JSON.parse(JSON.stringify(this.permissionMenuList))
    console.log(this.MenuList)

    this.MenuList = setTitle(this.MenuList)
    function setTitle(list) {
      var res = []
      list.map((val) => {
        val.title = val.meta.title
        if (val.children) {
          val.children = setTitle(val.children)
          if (val.children.length == 0) delete val.children
        }
        res.push(val)
      })
      return res
    }
  },
  methods: {
    load() {
      this.$router.go(0)
    },
    selectedKey(key){
        // 根据key 拿到item 然后赋值
      let item =   this.getItem(key,this.MenuList)
      this.item = item
      console.log(item);
     this.$refs.cForm.form = item
    },
    getItem(itemId,object){
        var res = null;
     for (const key of object) {
        if(key.id==itemId){
          res = key
          break
        }
        if(key.children){
          let resKey =    this.getItem(itemId,key.children);
          if(resKey){
             res = key
             break
          }
        }
     }
     return res
    },
    handleMenuClick() {},
  },
}
</script>
<style scoped src="./systems.css"/>
  